<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
	<title>Welcome to Design Zone......</title>
	<link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
	<link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
	<script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
	</script>
	<script type="text/javascript" src="../../scripts/ext/ext-all.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
    </script>
	<script type="text/javascript" src="../../scripts/menu/EditableItem.js">
	</script>
	<script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/GridFilters.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
	</script>
	<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
	</script>
	<script type="text/javascript" src="../../scripts/i18nMessage.js">
	</script>
	<script type="text/javascript" src="../../scripts/utils.js">
	</script>
	<script type="text/javascript" src="../../scripts/multiSelectProductIdentification.js">
	</script>
	<script type="text/javascript">
			var ppMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.package');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var piMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.productidentification');
			var referenceMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.reference');
            
            var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            
            var pId = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            
            var ppXMLPeader = new Ext.data.XmlReader({
                record: 'item'
            }, [{
                name: 'id',
                mapping: 'id'
            }, {
                name: 'consignor',
                mapping: 'consignor'
            }, {
                name: 'recipient',
                mapping: 'recipient'
            }, {
                name: 'unit',
                mapping: 'unit'
            }, {
                name: 'createTime',
                mapping: 'createTime'
            },{
                name: 'invoiceNumber',
                mapping: 'invoiceNumber'
            }, {
                name: 'comment',
                mapping: 'comment'
            }, {
                name: 'customerID',
                mapping: 'customerID'
            }, {
                name: 'customerName',
                mapping: 'customerName'
            }]);
            
            var xmlLoader = new xmlLoader('../../servlet/ProductPackageServlet?action=3&id=' + pId);
            
            var ppRecord = ppXMLPeader.readRecords(xmlLoader.getXml()).records[0];
			
            var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>', 
				'<tr><td width="33%"><b>' + ppMessage.get('ui.package.packagelist') + '&nbsp;(&nbsp;{unit}&nbsp;' + ppMessage.get('ui.package.unit') + '&nbsp;)</b></td>',
				'<td width="33%"><b>' + ppMessage.get('ui.package.createtime') + '(d/m/Y):&nbsp;&nbsp;</b>{createTime}</td>',
				'<td><b>' + ppMessage.get('ui.package.invoice') + ':&nbsp;&nbsp;</b>{invoiceNumber}</td>',
				
				'<tr><td width="33%" style="text-align: center;"><b>' + ppMessage.get('ui.package.consignor') + '</b></td>',
				'<td width="33%" style="text-align: center;"><b>' + ppMessage.get('ui.package.recipient') + '</b></td>',
				'<td style="text-align: center;"><b>' + message.get('message.edit.customername') + '</b></td>',
				
				'<tr><td width="33%" style="text-align: center;"><b>{consignor}</b></td>',
				'<td width="33%" style="text-align: center;"><b>{recipient}</b></td>',
				'<td style="text-align: center;"><b>{customerName}</b></td>',
				'</tbody></table>'];
            var itemTpl = new Ext.Template(itemTplMarkup);
            
			var productPackageItemForm;
			var productPackageItemStore;
			var productPackageItemGrid;
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                itemTpl.append('productPackage', ppRecord.data);
				
				productPackageItemForm = new Ext.FormPanel({
                    labelAlign: 'left',
                    url: '../../servlet/ProductPackageServlet?action=200',
                    frame: true,
                    title: ppMessage.get('ui.package.edititemlist'),
                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
                    width: '100%',
                    labelWidth: 70,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'color',
                        mapping: 'color'
                    },{
                        name: 'packageNumber',
                        mapping: 'packageNumber'
                    }, {
                        name: 'choice',
                        mapping: 'choice'
                    }, {
                        name: 'standard',
                        mapping: 'standard'
                    }, {
                        name: 'amountS',
                        mapping: 'amountS'
                    },{
                        name: 'amountM',
                        mapping: 'amountM'
                    },{
                        name: 'amountL',
                        mapping: 'amountL'
                    },{
                        name: 'amountXl',
                        mapping: 'amountXl'
                    },{
                        name: 'amountXxl',
                        mapping: 'amountXxl'
                    }, {
                        name: 'amountXxxl',
                        mapping: 'amountXxxl'
                    }, {
                        name: 'packageAmount',
                        mapping: 'packageAmount'
                    }, {
                        name: 'orderNumber',
                        mapping: 'orderNumber'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'yarnName',
                        mapping: 'yarnName'
                    }]),
                    items: [{
                        id: 'id',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'ppId',
                        name: 'ppId',
                        xtype: 'hidden',
						value: pId
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                name: 'orderNumber',
                                id: 'orderNumber',
                                fieldLabel: piMessage.get('ui.productidentification.ordernumber'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 128
                            }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'reference',
                                name: 'reference',
                                fieldLabel: referenceMessage.get('ui.reference.reference'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                name: 'yarnName',
                                id: 'yarnName',
                                fieldLabel: piMessage.get('ui.productidentification.yarnnumber'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                name: 'color',
                                id: 'color',
                                fieldLabel: piMessage.get('ui.productidentification.color'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }]
                    
                    },{
                        layout: 'column',
                        items: [{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'packageNumber',
                                name: 'packageNumber',
                                fieldLabel: ppMessage.get('ui.package.packagenumber'),
                                xtype: 'numberfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                id: 'choice',
                                name: 'choice',
                                fieldLabel: ppMessage.get('ui.package.choice'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }, {
                            columnWidth: .25,
                            layout: 'form',
                            items: [{
                                name: 'standard',
                                id: 'standard',
                                fieldLabel: ppMessage.get('ui.package.standard'),
                                xtype: 'textfield',
                                anchor: '86%',
                                allowBlank: false,
                                blankText: message.get('message.edit.noblank'),
                                maxLength: 64
                            }]
                        }]
                    
                   	},{
                        layout: 'column',
                        items: [{
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                id: 'amountS',
                                name: 'amountS',
                                fieldLabel: 'S',
                                xtype: 'numberfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                id: 'amountM',
                                name: 'amountM',
                                fieldLabel: 'M',
                                xtype: 'numberfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        }, {
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                name: 'amountL',
                                id: 'amountL',
                                fieldLabel: 'L',
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                name: 'amountXl',
                                id: 'amountXl',
                                fieldLabel: 'Xl',
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                name: 'amountXxl',
                                id: 'amountXxl',
                                fieldLabel: 'XXl',
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        },{
                            columnWidth: .16,
                            layout: 'form',
                            items: [{
                                name: 'amountXxxl',
                                id: 'amountXxxl',
                                fieldLabel: 'XXXl',
                                xtype: 'textfield',
                                anchor: '86%',
                                maxLength: 64
                            }]
                        }]
                    
                   	}],
                    
                    buttons: [{
                        text: message.get('message.edit.save'),
                        handler: function(){
                            if (productPackageItemForm.getForm().isValid()) {
                                productPackageItemForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        productPackageItemStore.reload();
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        productPackageItemForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
                    }, {
                        text: message.get('message.edit.reset'),
                        handler: function(){
                            productPackageItemForm.getForm().reset();
                        }
                    },{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'product_package_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'product_package_list.html';
                            }
                        }
			        }]
                });
                
                
                productPackageItemForm.render('productPackageItemForm');
				
				productPackageItemStore = new Ext.data.GroupingStore({
                    url: '../../servlet/ProductPackageServlet?action=201&id=' + pId,
			        reader: new Ext.data.XmlReader({
			            record: 'item',
			            id: 'id',
			            totalRecords: 'itemTotal'
			        }, [ {
							name: 'index',
							type: 'int'
						},'id', 'color', {
							name: 'packageNumber',
							type: 'int'
						},'choice', 'standard', {
							name: 'amountS',
							type: 'int'
						}, {
							name: 'amountM',
							type: 'int'
						}, {
							name: 'amountL',
							type: 'int'
						}, {
							name: 'amountXl',
							type: 'int'
						}, {
							name:'amountXxl',
							type: 'int'
						}, {
							name:'amountXxxl',
							type: 'int'
						},{
							name:'packageAmount',
							type: 'int'
						}, 
						'orderNumber', 'reference', 'yarnName'
					]),
			        groupField: 'orderNumber',
					remote: false
			    });
				
				productPackageItemStore.setDefaultSort('index', 'asc');
				
				var summary = new Ext.grid.GroupSummary();
				productPackageItemGrid = new Ext.grid.GridPanel({
			        title: ppMessage.get('ui.package.itemlist'),
			        store: productPackageItemStore,
			        stripeRows: true,
			        plugins: [summary],
			        height: 560,
			        columns: [{
						header: message.get('message.list.id'),
			            width: 50,
			            dataIndex: 'index',
						groupable: false,
			            sortable: true,
						hidden: true
					},{
			            header: piMessage.get('ui.productidentification.ordernumber'),
			            width: 50,
			            dataIndex: 'orderNumber',
						groupable: false,
			            sortable: false
			        },{
			            header: referenceMessage.get('ui.reference.reference'),
			            dataIndex: 'reference',
			            sortable: false,
						groupable: false,
						hidden: true
			        },{
			            header: piMessage.get('ui.productidentification.yarnnumber'),
			            dataIndex: 'yarnName',
			            sortable: false,
						groupable: false,
						hidden: true
			        },{
			            header: piMessage.get('ui.productidentification.color'),
			            dataIndex: 'color',
						groupable: false,
			            sortable: false,
						summaryRenderer: function(v, params, data){
							return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + ppMessage.get('ui.package.totalpackage');
						}
			        },{
			            header: ppMessage.get('ui.package.packagenumber'),
			            dataIndex: 'packageNumber',
						groupable: false,
			            sortable: true,
						summaryType:'max'
			        },{
			            header: ppMessage.get('ui.package.choice'),
			            dataIndex: 'choice',
						groupable: false,
			            sortable: false
			        },{
			            header: ppMessage.get('ui.package.standard'),
			            dataIndex: 'standard',
			            sortable: false,
						groupable: false,
						summaryRenderer: function(v, params, data){
		                    return '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + message.get('message.list.total');
		                }
			        }, {
			            header: 'S',
			            dataIndex: 'amountS',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: 'M',
			            dataIndex: 'amountM',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: 'L',
			            dataIndex: 'amountL',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: 'XL',
			            dataIndex: 'amountXl',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: 'XXL',
			            dataIndex: 'amountXxl',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: 'XXXL',
			            dataIndex: 'amountXxxl',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
			            header: ppMessage.get('ui.package.total'),
			            dataIndex: 'packageAmount',
			            sortable: false,
						groupable: false,
						summaryType:'sum'
			        },{
                        header: message.get('message.list.eidt'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 50,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderDelete
                    }],
			        view: new Ext.grid.GroupingView({
                        forceFit: true,
						hideGroupedColumn: true,
						enableNoGroups:false,
                        groupTextTpl: piMessage.get('ui.productidentification.ordernumber') + ':&nbsp;&nbsp;&nbsp;&nbsp;{[values.rs[0].data.orderNumber]}&nbsp;&nbsp;&nbsp;&nbsp;' +
						referenceMessage.get('ui.reference.reference') + ':&nbsp;&nbsp;&nbsp;&nbsp;{[values.rs[0].data.reference]}&nbsp;&nbsp;&nbsp;&nbsp;' + 
						piMessage.get('ui.productidentification.yarnnumber') + ':&nbsp;&nbsp;&nbsp;&nbsp;{[values.rs[0].data.yarnName]}'
                    }),
			        loadMask: true,
			        renderTo: 'productPackageItemGrid'
				});
				
				productPackageItemStore.on('load', function(){
					productPackageItemStore.sort('index', 'ASC');
					productPackageItemStore.sort('packageNumber', 'ASC');
					productPackageItemGrid.setHeight(productPackageItemStore.getTotalCount() * 31);
				})
				
				productPackageItemStore.load();
				
				function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="Edition" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="Supprimer"/></a>', record.id);
                }
			});
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/ProductPackageServlet?action=202&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                productPackageItemStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				productPackageItemForm.getForm().load({
					url:'../../servlet/ProductPackageServlet?action=203&id=' + editId, 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						
					}
				});
			}
	
	</script>
</head>
<body>
	<div id="productPackage">
    </div>
	<div id="productPackageItemForm">
    </div>
	<div id="productPackageItemGrid">
    </div>
</body>
</html>